<template>
	<div class="homePage_container padding-1 pt-2">
		<div class="homePage_container_top_logo mb-1">
			<img :src="topImg" class="homePage_container_top_logo_home" alt="">
			<van-badge :dot="bellShow">
				<img src="@/image/homePage/indexTop/bell.png" class="homePage_container_top_logo_bell" alt="" @click="goAnnouncement">
			</van-badge>
		</div>
		
		<div class="homePage_container_fun mb-1">
			<van-row gutter="10" class="mb-1">
				<van-col span="8">
					<div class="homePage_container_fun_item1" @click="goChat">
						<div>{{ transferWord.chat}}</div>
					</div>
				</van-col>
				<van-col span="16">
					<div class="homePage_container_fun_item2" @click="goExplore">
						<div>{{ transferWord.space }}</div>
						<img src="@/image/homePage/indexNav/explore4.png" alt="">
					</div>
				</van-col>
			</van-row>
			<van-row class="mb-1">
				<van-col span="24">
					<div class="homePage_container_fun_item3" @click="goAiQuantization">
						<div class="pl-1">{{ transferWord.ai }}</div>
					</div>
				</van-col>
			</van-row>
			<van-row gutter="10">
				<van-col span="12">
					<div class="homePage_container_fun_item4 pt-1" @click="goAiDrawing">
						<div class="homePage_container_fun_item_font1 pl-1">{{ transferWord.painting }}</div>
						<div class="homePage_container_fun_item_font2 pl-1">{{ transferWord.image }}</div>
					</div>
				</van-col>
				<van-col span="12">
					<div class="homePage_container_fun_item5 pt-1" @click="goAiChat">
						<div class="homePage_container_fun_item_font1 pl-1">{{ transferWord.chatbot }}</div>
						<div class="homePage_container_fun_item_font2 pl-1">{{ transferWord.openChat }}</div>
					</div>
				</van-col>
			</van-row>
		</div>

		<van-notice-bar v-if="noticeBarText" scrollable class="mb-1" color="#FFFFFF" background="#0C1527" left-icon="volume-o" :text="noticeBarText">
		</van-notice-bar>

		<div class="homePage_container_list">
			<div class="homePage_container_list_topImage mb-1">
				<img src="@/image/homePage/indexList/title3.png" alt="">
			</div>

			<van-tabs type="card" @click="creationClick" :swipe-threshold="5" animated background="#0C1527">
				<van-tab v-for="(item , index) in disposeDrawingType" :key="index" :title="item.name" :name="item.id">
					<ComHomeListItem :list="aiListItems"></ComHomeListItem>
				</van-tab>
			</van-tabs>
		</div>
		

	</div>
</template>

<script>
import ComHomeListItem from "@/components/comHomeListItem";
import { getHomeList , getAiDrawList } from "@/request/homePage"
import { drawingType } from "@/utils"
import BusinessUtils from '@/utils/business';
import { getLanguage } from '@/lang';
export default {
	name: 'HomePage',
	components:{
		ComHomeListItem
	},
	data(){
		return{
			bellShow:true,
			transferWord:{
				chat : this.$t("聊天室"),
				space : this.$t("太空大逃杀"),
				ai : this.$t("SPACE AI 量化策略"),
				painting : this.$t("AI绘画"),
				chatbot : this.$t("AI 聊天机器人"),
				openChat : this.$t("进行开放式聊天"),
				image : this.$t("文声图"),
			},
			noticeBarText : '',
			activeName:0,
			aiImageTabs:[
					{ id: 0, name: '古风' },
					{ id: 1, name: '二次元' },
					{ id: 2, name: '卡通画' },
					{ id: 3, name: '写实风格' },
					{ id: 4, name: '水彩画' },
					{ id: 5, name: '油画' },
					{ id: 6, name: '探索无限' },
					{ id: 7, name: '未来主义' },
					{ id: 8, name: '像素风格' },
					{ id: 9, name: '赛博朋克' },
					{ id: 10, name: '洛丽塔风格' },
					{ id: 11, name: '巴洛克风格' },
					{ id: 12, name: '超现实主义' },
					{ id: 13, name: '蒸汽波艺术' },
					{ id: 14, name: '浮世绘' },
					{ id: 15, name: 'low pol' },
					{ id: 16, name: '概念艺术' },
			],
			// 替换数据
			aiImageList:[
				{
					id:0,
					data:[
						{
							id:0,
							title:'AI绘画',
							content:require('@/image/homePage/indexList/testImage.png'),
						},
						{
							id:1,
							title:'AI绘画',
							content:require('@/image/homePage/indexList/testImage.png'),
						},
						{
							id:2,
							title:'AI绘画',
							content:require('@/image/homePage/indexList/testImage.png'),
						}
					]
				}
			],
			aiListItems:[],
			topImg: require("@/image/homePage/indexTop/home_zh.png")
		}
	},
	computed:{
		disposeDrawingType(){
			return drawingType.map(item => {
				return {
					...item,
					name: this.$t(item.name)
				}
			})
		}
	},
	mounted(){
		let lang = getLanguage();
		if(lang && lang != 'zh_CN'){
			this.topImg = require("@/image/homePage/indexTop/home_en.png")
		}else{
			this.topImg = require("@/image/homePage/indexTop/home_zh.png")
		}
		// this.aiListItems = this.aiImageList.filter(item => item.id == this.activeName);
		this.getInfo()
	},
	methods:{
		getInfo(){
			// 获取首页数据
			getHomeList({}).then(res=>{
				if(res.code == 1){
					let notice = res.data.notice;
					let str =  ''
					res.data.gonggao.forEach(item=>{
						let newText = this.$i18n.t("UID {UID} 购买了 {amount} {currency} {productName} 投资套餐", {
							UID: item.code,
							amount: Number(item.order_amount).toFixed(0),
							currency: item.currency,
							productName: BusinessUtils.getProductNameById(item.id)
						});
						str = str + '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0' + newText
					})
					// res.data.notice.forEach(item=>{
					// 	str += item.text.replace(/<\/?p>/g, ' ')
					// })
					this.noticeBarText = str
					this.bellShow = !!res.data.notice_num
				}
			})
			this.getImageList()
		},
		getImageList(){
			// 获取AI绘画数据
			getAiDrawList({}).then(res=>{
				if(res.code == 1){
					this.aiImageList = res.data
					this.disposeImgList()
				}
			})
		}, 
		disposeImgList(){
			this.aiListItems = []
			let num = this.aiImageTabs.filter(item => item.id == this.activeName)
			this.aiImageList.forEach(item => {
				if(item.imagestyle == num[0].name){
					this.aiListItems.push(item)
				}
			})
		},
		goAnnouncement(){
			// 跳转公告
			if (this.$route.name !== 'Announcement') {
				this.$router.push({name:'Announcement'})
			}
		},
		creationClick(name , title){
			this.activeName = name;
			// this.aiListItems = []
			// this.aiListItems = this.aiImageList.filter(item => item.id == name);
			this.disposeImgList()
		},
		goAiQuantization(){
			// 跳转AI量化策略
			if (this.$route.name !== 'AiQuantization') {
				this.$router.push({name:'AiQuantization'})
			}
		},
		goAiDrawing(){
			// 跳转AI绘画
			if (this.$route.name !== 'AiDrawing') {
				this.$router.push({name:'AiDrawing'})
			}
		},
		goAiChat(){
			// 跳转AI聊天机器人
			if (this.$route.name !== 'AiChat') {
				this.$router.push({name:'AiChat'})
			}
		},
		goChat(){
			// 跳转聊天室
			if (this.$route.name !== 'ChatTools') {
				this.$router.push({name:'ChatTools'})
			}
		},
		goExplore(){
			let token = localStorage.getItem('token')
			let lang = localStorage.getItem('SET_LANGUAGE')
			window.open(process.env.VUE_APP_GAME_SRC+`/?token=${token}&lang=${lang}`, '_blank')

			// this.$toast.fail(this.$t("暂未开放"))
		}
	}
};
</script>

<style lang="less">

</style>